<template>
    <el-card shadow="never" class="!border-none">
        <el-alert
            :closable="false"
            show-icon
            title="温馨提示：设置中的足迹气泡开关是整个气泡的总开关,如果这里关了则任何地方都不显示气泡"
        >
        </el-alert>
    </el-card>
    <el-card shadow="never" class="!border-none mt-[15px]">
        <el-form ref="formRef" :model="formData" label-width="150px">
            <el-form-item label="气泡状态">
                <div>
                    <div>
                        <el-switch
                            v-model="formData.status"
                            :active-value="1"
                            :inactive-value="0"
                        />
                    </div>

                    <div class="form-tips">关闭后系统中将不会显示足迹气泡，默认开启</div>
                </div>
            </el-form-item>
            <el-form-item label="气泡时长">
                <div>
                    <div>
                        <el-input v-model="formData.duration" placeholder="请输入">
                            <template #append>分钟</template>
                        </el-input>
                    </div>

                    <div class="form-tips">查询多长时间范围内的足迹信息</div>
                </div>
            </el-form-item>
            <el-form-item label="显示内容">
                <div>
                    <div>
                        <el-checkbox-group v-model="formData.pages">
                            <el-checkbox label="1">首页</el-checkbox>
                            <el-checkbox label="2">商品详情</el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div class="form-tips">设置在哪些页面会显示气泡</div>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
    <footer-btns>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
</template>
<script lang="ts" setup>
import { setConfig, getConfiglists } from '@/api/application'
import feedback from '@/utils/feedback'

const formData = reactive({
    status: 1,
    duration: 60,
    pages: [1, 2]
})
const getData = async () => {
    try {
        const data = await getConfiglists()
        for (const key in formData) {
            //@ts-ignore
            formData[key] = data[key]
        }
    } catch (error) {
        console.log('获取=>', error)
    }
}
getData()
const handleSubmit = async () => {
    await setConfig(formData)
    feedback.msgSuccess('操作成功')
}
</script>
<style scoped lang="scss">
.el-alert--info {
    color: rgba(64, 115, 250, 1);
    background-color: rgba(246, 248, 255, 1);
}
</style>
